---
title: Comparte el estado entre componentes de Astro
description: Aprende como compartir el estado entre componentes de Astro con Nano Stores.
i18nReady: true
type: recipe
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

:::tip
¿Estás usando componentes de framework? Mira [como compartir el estado entre Islas](/es/recipes/sharing-state-islands/)!
:::

Cuando construyes un sitio web con Astro, es posible que necesites compartir el estado entre componentes. Astro recomienda el uso de [Nano Stores](https://github.com/nanostores/nanostores) para el almacenamiento compartido del cliente.

## Receta

1. Instala Nano Stores:

  <PackageManagerTabs>
    <Fragment slot="npm">
    ```shell
    npm install nanostores
    ```
    </Fragment>
    <Fragment slot="pnpm">
    ```shell
    pnpm add nanostores
    ```
    </Fragment>
    <Fragment slot="yarn">
    ```shell
    yarn add nanostores
    ```
    </Fragment>
  </PackageManagerTabs>

2. Crea un store. En este ejemplo, el store rastrea si un diálogo está abierto o no:

  ```ts title="src/store.js"
  import { atom } from 'nanostores';

  export const isOpen = atom(false);
  ```

3. Importa y utiliza el store en una etiqueta `<script>` en los componentes que compartirán el estado.

Los siguientes componentes `Button` y `Dialog`  utilizan el estado compartido `isOpen` para controlar si un `<div>` en particular está oculto o mostrado:

  ```astro title="src/components/Button.astro"
  <button id="openDialog">Open</button>

  <script>
    import { isOpen } from '../store.js';
    
    // Configura el store a true cuando se hace clic en el botón
    function openDialog() {
      isOpen.set(true);
    }

    // Agrega un escuchador de eventos al botón
    document.getElementById('openDialog').addEventListener('click', openDialog);
  </script>
  ```

  ```astro title="src/components/Dialog.astro"
  <div id="dialog" style="display: hidden">¡Hola Mundo!</div>

  <script>
    import { isOpen } from '../store.js';

    // Escucha los cambios en el store y muestra/oculta el diálogo en consecuencia
    isOpen.subscribe(open => {
      if (open) {
        document.getElementById('dialog').style.display = 'block';
      } else {
        document.getElementById('dialog').style.display = 'none';
      }
    })
  </script>
  ```

## Recursos 

- [Nano Stores en NPM](https://www.npmjs.com/package/nanostores)
- [Documentación de Nano Stores para Vanilla JS](https://github.com/nanostores/nanostores#vanilla-js)
